<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <script>
    var maximumWhiteTiles = function (tiles, carpetLen) {
      const sortedTiles = tiles.sort((a, b) => a[0] - b[0]);
      let maxRes = 0;
      let l = 0;
      let r = 0;
      let sum = 0;
      while (r < sortedTiles.length) {
        let maxCarpetR = sortedTiles[l][0] + carpetLen - 1; // 计算下标为l的区间左侧端点开始覆盖的窗口右边界的下标，窗口长度始终固定为carpetLen
        // 处理全覆盖区间
        if (sortedTiles[r][1] <= maxCarpetR) {
          sum += sortedTiles[r][1] - sortedTiles[r][0] + 1;
          maxRes = Math.max(maxRes, sum);
          r++; // 当以下标为r的区间右侧端点小于窗口右边界，即窗口完全覆盖区间，窗口右移，以覆盖更多区间
        } else {
          // 处理部分覆盖区间,思考下为啥部分覆盖瓷砖不能统计到sum里面？因为sum在累加时是统计全覆盖区间的，如果统计了部分覆盖区间，那么如果该部分覆盖区间被下次滑动的窗口全覆盖就会重复统计。
          if (maxCarpetR >= sortedTiles[r][0]) {
            maxRes = Math.max(maxRes, sum + maxCarpetR - sortedTiles[r][0] + 1);
          }
          // 在以下标为l的区间左侧端点为窗口左边界且长度为carpetLen的窗口找出最大覆盖数之后，窗口左边界右移，调整到下一个区间开头
          sum -= sortedTiles[l][1] - sortedTiles[l][0] + 1;
          l++;
        }
      }
      return maxRes;
    };
    console.log(maximumWhiteTiles(tiles = [[1, 5], [10, 11], [12, 18], [20, 25], [30, 32]], carpetLen = 10))
  </script>
</body>

</html>